<template>
    <div id="options">
        <Option :style="currentIndex === selected.id ? active : null" v-for="selected of selecteds" @click.native="optionClick(selected.id)" :key="selected.id" :text="selected.text"/>
    </div>
</template>
<!--选项卡-->
<script>
    import Option from "./item/Option";
    export default {
        props: {
          selecteds: {
              type: Array,
              required: true
          }
        },
        name: "Options",
        data(){
            return{
                currentIndex: 1
            }
        },
        components: {
            Option
        },
        computed: {
          active(){
              return {'background-color': '#FFD000','border-radius':'5px'};
          }
        },
        methods:{
            optionClick(id){
                this.currentIndex = id;
                this.$emit("option-click", id);
            }
        }
    }
</script>

<style scoped>
    #options{
        display: flex;
        margin-top: 20px;

    }
</style>
